<head>
    <link rel="stylesheet" type="text/css" href="css\modal.css">
</head>
<div class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true" data-backdrop="false">&times;</button>
                <h4 class="modal-title">Records</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <!-- <p>Show Allergies <input type="checkbox" ng-model="showAllergy"></p>
                        <p>Show Procedures<input type="checkbox" ng-model="showProc"></p>
                        <p>Show Conditions<input type="checkbox" ng-model="showCond"></p>
                        <p>Show Immunizations<input type="checkbox" ng-model="showImm"></p>
                        <p>Show Observations<input type="checkbox" ng-model="showObs"></p>
                        <p>Show Medications<input type="checkbox" ng-model="showMed"></p> -->

                    <ul class="list-group">
                        <li class="list-group-item">
                            Allergies
                            <div class="material-switch pull-right">
                                <input id="allergy" type="checkbox" ng-model="showAllergy" />
                                <label for="allergy" class="label-danger"></label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            Procedures
                            <div class="material-switch pull-right">
                                <input id="proc" type="checkbox" ng-model="showProc" />
                                <label for="proc" class="label-warning"></label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            Conditions
                            <div class="material-switch pull-right">
                                <input id="cond" type="checkbox" ng-model="showCond" />
                                <label for="cond" class="label-info"></label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            Immunizations
                            <div class="material-switch pull-right">
                                <input id="imm" type="checkbox" ng-model="showImm" />
                                <label for="imm" class="label-success"></label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            Observations
                            <div class="material-switch pull-right">
                                <input id="obs" type="checkbox" ng-model="showObs" />
                                <label for="obs" class="label-primary"></label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            Medications
                            <div class="material-switch pull-right">
                                <input id="med" type="checkbox" ng-model="showMed" />
                                <label for="med" class="label-default"></label>
                            </div>
                        </li>
                    </ul>

                </div>

                <div class="container-fluid">

                    <md-card ng-repeat="records in allergy" ng-show="showAllergy">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Record - {{records.id}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <hr style="border-top: 8px solid #f3cbca;">
                            <div class="card-content-wrapper">
                                <p class="header">Record date:</p>
                                <p class="description">{{records.record_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record type:</p>
                                <p class="description">Allergy</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record reason:</p>
                                <p class="description">{{records.record_reasonDesc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Health provider:</p>
                                <p class="description">{{records.healthProvider.substring(records.healthProvider.indexOf("#")+1,
                                    records.healthProvider.length);}}
                                </p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">&nbsp;</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Start date:</p>
                                <p class="description">{{records.allergy_start}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Stop date:</p>
                                <p class="description">{{records.allergy_stop}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Description:</p>
                                <p class="description">{{records.allergy_desc}}</p>
                            </div>
                        </md-card-content>
                    </md-card>

                    <md-card ng-repeat="records in proc" ng-show="showProc">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Record - {{records.id}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <hr style="border-top: 8px solid #fae6c9;">
                            <div class="card-content-wrapper">
                                <p class="header">Record date:</p>
                                <p class="description">{{records.record_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record type:</p>
                                <p class="description">Procedure</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record reason:</p>
                                <p class="description">{{records.record_reasonDesc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Health provider:</p>
                                <p class="description">{{records.healthProvider.substring(records.healthProvider.indexOf("#")+1,
                                    records.healthProvider.length);}}
                                </p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">&nbsp;</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Procedure date:</p>
                                <p class="description">{{records.procedure_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Description:</p>
                                <p class="description">{{records.procedure_desc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Reason:</p>
                                <p class="description">{{records.procedure_reasonDesc}}</p>
                            </div>
                        </md-card-content>
                    </md-card>

                    <md-card ng-repeat="records in imm" ng-show="showImm">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Record - {{records.id}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <hr style="border-top: 8px solid #bee4c7;">
                            <div class="card-content-wrapper">
                                <p class="header">Record date:</p>
                                <p class="description">{{records.record_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record type:</p>
                                <p class="description">Immunization</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record reason:</p>
                                <p class="description">{{records.record_reasonDesc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Health provider:</p>
                                <p class="description">{{records.healthProvider.substring(records.healthProvider.indexOf("#")+1,
                                    records.healthProvider.length);}}
                                </p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">&nbsp;</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Immunization date:</p>
                                <p class="description">{{records.imm_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Description:</p>
                                <p class="description">{{records.imm_desc}}</p>
                            </div>
                        </md-card-content>
                    </md-card>

                    <md-card ng-repeat="records in cond" ng-show="showCond">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Record - {{records.id}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <hr style="border-top: 8px solid #cdecf5;">
                            <div class="card-content-wrapper">
                                <p class="header">Record date:</p>
                                <p class="description">{{records.record_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record type:</p>
                                <p class="description">Condition</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record reason:</p>
                                <p class="description">{{records.record_reasonDesc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Health provider:</p>
                                <p class="description">{{records.healthProvider.substring(records.healthProvider.indexOf("#")+1,
                                    records.healthProvider.length);}}
                                </p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">&nbsp;</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Start date:</p>
                                <p class="description">{{records.cond_start}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Stop date:</p>
                                <p class="description">{{records.cond_stop}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Description:</p>
                                <p class="description">{{records.cond_desc}}</p>
                            </div>

                        </md-card-content>
                    </md-card>

                    <md-card ng-repeat="records in obs" ng-show="showObs">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Record - {{records.id}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <hr style="border-top: 8px solid #c6dcef;">
                            <div class="card-content-wrapper">
                                <p class="header">Record date:</p>
                                <p class="description">{{records.record_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record type:</p>
                                <p class="description">Observation</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record reason:</p>
                                <p class="description">{{records.record_reasonDesc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Health provider:</p>
                                <p class="description">{{records.healthProvider.substring(records.healthProvider.indexOf("#")+1,
                                    records.healthProvider.length);}}
                                </p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">&nbsp;</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Observation date:</p>
                                <p class="description">{{records.obs_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Description:</p>
                                <p class="description">{{records.obs_desc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Value:</p>
                                <p class="description">{{records.obs_value}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Units:</p>
                                <p class="description">{{records.obs_units}}</p>
                            </div>
                        </md-card-content>
                    </md-card>

                    <md-card ng-repeat="records in med" ng-show="showMed">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Record - {{records.id}}</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <hr style="border-top: 8px solid lightgray;">
                            <div class="card-content-wrapper">
                                <p class="header">Record date:</p>
                                <p class="description">{{records.record_date}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record type:</p>
                                <p class="description">Medication</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Record reason:</p>
                                <p class="description">{{records.record_reasonDesc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Health provider:</p>
                                <p class="description">{{records.healthProvider.substring(records.healthProvider.indexOf("#")+1,
                                    records.healthProvider.length);}}
                                </p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">&nbsp;</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Start date:</p>
                                <p class="description">{{records.medication_start}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Stop date:</p>
                                <p class="description">{{records.medication_stop}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Description:</p>
                                <p class="description">{{records.medication_desc}}</p>
                            </div>
                            <div class="card-content-wrapper">
                                <p class="header">Reason:</p>
                                <p class="description">{{records.medication_reasonDesc}}</p>
                            </div>
                        </md-card-content>
                    </md-card>
                </div>
            </div>
        </div>
    </div>